<template>
  <div>
    <mai-dog
      v-for="(item, index) in list"
      :key="index"
      :dogImgUrl="item.dogImgUrl"
      :dogName="item.dogName"
      :index="index"
      @jieShao="contain"
    />
    <span>您喜欢的狗如下:{{ name }}</span>
  </div>
</template>

<script>
import MaiDog from './components/MaiDog.vue'
export default {
  data() {
    return {
      name: '',
      list: [
        {
          dogImgUrl:
            'https://ts1.cn.mm.bing.net/th/id/R-C.ff373843675363d2bce00981f1a91ddf?rik=gWGkG4bJiZivsw&riu=http%3a%2f%2fwww.xiao89.com%2fuploads%2fallimg%2f190604%2f10-1Z604162515.jpg&ehk=ARNePj9fQ0yg%2fx0cOVSnbshsQS4DK2zLvQ72nXNNCI8%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1',
          dogName: '博美',
        },
        {
          dogImgUrl:
            'https://tse4-mm.cn.bing.net/th/id/OIP-C.h78nNWta0dM1SMw3O1PBlwHaHa?pid=ImgDet&rs=1',
          dogName: '泰迪',
        },
        {
          dogImgUrl:
            'https://n.sinaimg.cn/sinacn15/560/w1080h1080/20180513/9ad1-hamfahx6081487.jpg',
          dogName: '金毛',
        },
        {
          dogImgUrl:
            'https://tse4-mm.cn.bing.net/th/id/OIP-C.UxIa__8U1ObB23rsKW2PkAHaG_?pid=ImgDet&rs=1',
          dogName: '哈士奇',
        },
        {
          dogImgUrl:
            'https://tse1-mm.cn.bing.net/th/id/OIP-C.-R6WxZzMoyts9ahCfijX_AHaF4?pid=ImgDet&rs=1',
          dogName: '阿拉斯加',
        },
        {
          dogImgUrl:
            'https://img.zcool.cn/community/01187059f68d27a801202b0cfe208d.jpg@2o.jpg',
          dogName: '萨摩耶',
        },
      ],
    }
  },
  methods: {
    contain(index) {
      this.name = this.list[index].dogName
      console.log(index)
    },
  },
  components: {
    MaiDog,
  },
}
</script>

<style></style>
